//元素节点遍历
export function traverseNode(node) {
    // 创建两个数组来分别存储标签节点和文本节点
    const textNodes = [];
    if (node.nodeType === 11) {
        // 对 DocumentFragment 节点不进行处理，直接遍历它的子节点
        for (let child of node.childNodes) {
            const data = traverseNode(child);
            textNodes.push(...data)
        }
        return textNodes; // 直接返回，不再处理此节点
    }
    if (node.nodeType === Node.TEXT_NODE) {
        // 如果是文本节点，直接存储
        textNodes.push(node)
    } else if (node.nodeType === Node.ELEMENT_NODE) {
        // 遍历元素节点的子节点
        for (let child of node.childNodes) {
            const data = traverseNode(child)
            textNodes.push(...data)
        }
    }
    return textNodes
}
//创建节点处理,color-颜色，tagName-标签名,text-文字内容,isOther-不止文本内容
export function createNodeHandler(range, { isOther = false, color, text, tagName }) {
    const startContainer = range.startContainer;
    const endContainer = range.endContainer;
    if(startContainer === endContainer) {
        alert('同一行')
    } else {
        
        alert('不同行')
    }
    return 
    if (color) {
        colorHandler({ isOther, color, range, text })
    } else if (tagName === "strong") {
        strongHandler({ isOther, tagName, range, text })
    } else if(tagName === "em") {
        emHandler({ isOther, tagName, range, text })
    } else if(tagName === "u") {
        underlineHandler({ isOther, tagName, range, text })
    }

}
//颜色处理
function colorHandler({ color, range, text,isOther }) {
    const span = document.createElement('span');
    span.innerText = text;
    if (isOther) {
        span.style.color = color;
        //添加节点到选中的后面
        // range.endContainer.insertBefore(span, range.endContainer.childNodes[range.endOffset]);
    } else {
        if (range.endContainer.parentNode.localName === "span") {
            //文字节点且已存在父节点，就只修改父节点颜色
            range.endContainer.parentNode.style.color = color;
        } else {
            span.style.color = color;
            // 将选中的文本放到标签中
            range.surroundContents(span);
        }

    }
}
//strong字体处理
function strongHandler({ isOther, tagName, range, text }) {
    const tag = document.createElement(tagName);
    tag.innerText = text;
    if (isOther) {
        //添加节点到选中的后面
        range.endContainer.insertBefore(tag, range.endContainer.childNodes[range.endOffset]);
    } else {
        const prevElement = range.endContainer.previousElementSibling
        const nextElement = range.endContainer.nextElementSibling
        const parentNode = range.endContainer.parentNode
        if (prevElement && prevElement.localName === tagName) {
            // 前一个节点是tagName，就合并
            prevElement.innerText += text
        } else if (nextElement && nextElement.localName === tagName) {
            // 后一个节点是tagName，就合并
            nextElement.innerText = text + nextElement.innerText
        } else if (parentNode.localName !== tagName) {
            // 选中内容和区域标签相同时，直接替换掉
            if (parentNode.localName === "span" && parentNode.innerHTML === text) {
                parentNode.parentNode.replaceChild(tag, parentNode)
            } else {
                range.surroundContents(tag);
            }
        } else if (parentNode.localName === tagName) {
            
            const initValue = range.endContainer.nodeValue
            //当选中到标签内的内容时，做截断处理
            const fragment = tagExtractHandler({initValue,text,tagName})
            //截断后的新元素替换掉旧元素
            parentNode.parentNode.replaceChild(fragment, parentNode);
        }
    }
}
//em字体处理
function emHandler({ isOther, tagName, range, text }) {
    const tag = document.createElement(tagName);
    tag.innerText = text;
    if (isOther) {
        //添加节点到选中的后面
        range.endContainer.insertBefore(tag, range.endContainer.childNodes[range.endOffset]);
    } else {
        const prevElement = range.endContainer.previousElementSibling
        const nextElement = range.endContainer.nextElementSibling
        const parentNode = range.endContainer.parentNode
        if (prevElement && prevElement.localName === tagName) {
            // 前一个节点是tagName，就合并
            prevElement.innerText += text
        } else if (nextElement && nextElement.localName === tagName) {
            // 后一个节点是tagName，就合并
            nextElement.innerText = text + nextElement.innerText
        } else if (parentNode.localName !== tagName) {
            // 选中内容和区域标签相同时，直接替换掉
            if (parentNode.localName === "span" && parentNode.innerHTML === text) {
                parentNode.parentNode.replaceChild(tag, parentNode)
            } else {
                range.surroundContents(tag);
            }
        } else if (parentNode.localName === tagName) {
            const initValue = range.endContainer.nodeValue
            //当选中到标签内的内容时，做截断处理
            const fragment = tagExtractHandler({initValue,text,tagName})
            //截断后的新元素替换掉旧元素
            parentNode.parentNode.replaceChild(fragment, parentNode);
        }
    }
}
//下划线处理
function underlineHandler({ isOther, tagName, range, text }){
    const tag = document.createElement(tagName);
    tag.innerText = text;
    if (isOther) {
        //添加节点到选中的后面
        range.endContainer.insertBefore(tag, range.endContainer.childNodes[range.endOffset]);
    } else {
        const prevElement = range.endContainer.previousElementSibling
        const nextElement = range.endContainer.nextElementSibling
        const parentNode = range.endContainer.parentNode
        if (prevElement && prevElement.localName === tagName) {
            // 前一个节点是tagName，就合并
            prevElement.innerText += text
        } else if (nextElement && nextElement.localName === tagName) {
            // 后一个节点是tagName，就合并
            nextElement.innerText = text + nextElement.innerText
        } else if (parentNode.localName !== tagName) {
            // 选中内容和区域标签相同时，直接替换掉
            if (parentNode.localName == "span" && parentNode.innerHTML === text) {
                parentNode.parentNode.replaceChild(tag, parentNode)
            } else {
                range.surroundContents(tag);
            }
        } else if (parentNode.localName === tagName) {
            const initValue = range.endContainer.nodeValue
            //当选中到标签内的内容时，做截断处理
            const fragment = tagExtractHandler({initValue,text,tagName})
            //截断后的新元素替换掉旧元素
            parentNode.parentNode.replaceChild(fragment, parentNode);
        }
    }
}
//标签节点截断处理,返回截断后的元素
function tagExtractHandler({text,initValue,tagName}){
    const index = initValue.indexOf(text)
    const prevText = initValue.substr(0, index)
    const nextText = initValue.substr(index + text.length, initValue.length - 1)
    //创建一个空标签fragment，用来批量插入子元素
    const fragment = document.createDocumentFragment();
    const nextDom = createDom(tagName, nextText)
    const dom = createDom('span', text)
    const prevDom = createDom(tagName, prevText)
    prevText && fragment.appendChild(prevDom)
    fragment.appendChild(dom)
    nextText && fragment.appendChild(nextDom)
    return fragment
}

//选取selection截取内容,并返回字符串
export function extractContents(range) {
    //截取选中的内容
    const fragment = range.extractContents()
    //获取选中的文字节点
    const textNodes = traverseNode(fragment);
    let str = textNodes.map(item => item.nodeValue).join("")
    return str
}
export function setCursorToPosition(dom, position) {
    const range = document.createRange();
    const selection = window.getSelection();
    // 清除当前选择
    selection.removeAllRanges();
    //设置光标位置
    range.setStart(dom, position);
    selection.addRange(range);
}
//创建元素
function createDom(tagName, text) {
    const tag = document.createElement(tagName)
    tag.innerText = text
    return tag
}